import 'package:concierge/app/constant.dart';
import 'package:concierge/app/widgets/custom_text_field.dart';
import 'package:concierge/generated/locales.g.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import 'logic.dart';

class EmailLoginPage extends StatelessWidget {
  const EmailLoginPage({super.key});
  @override
  Widget build(BuildContext context) {
    final EmailLoginLogic logic = Get.find<EmailLoginLogic>();
    final state = logic.state;
    var hintStyle = TextStyle(color: Colors.grey, fontSize: 14.sp);
    return Scaffold(
      appBar: AppBar(
        title: Text(
          LocaleKeys.email_login.tr,
          style: TextStyle(color: Colors.black),
        ),
        centerTitle: true,
      ),
      body: Padding(
        padding: EdgeInsets.all(25),
        child: Column(
          children: [
            Obx(() => CustomTextField(
                  value: state.email.value,
                  style: TextStyle(color: Colors.black),
                  onChanged: (t) {
                    state.email.value = t;
                  },
                  inputFormatters: [
                    FilteringTextInputFormatter.allow(
                      RegExp(r'[a-zA-Z0-9@._-]'),
                    )
                  ],
                  keyboardType: TextInputType.emailAddress,
                  inputDecoration: InputDecoration(
                      isCollapsed: true,
                      isDense: true,
                      border: InputBorder.none,
                      hintStyle: hintStyle,
                      hintText: LocaleKeys.enter_email_account.tr),
                )),
            Divider(
              color: lineColor,
              height: 25,
              thickness: 0.3,
            ),
            IntrinsicHeight(
              child: Row(
                children: [
                  Expanded(
                    child: Obx(() => CustomTextField(
                          value: state.code.value,
                          onChanged: (t) {
                            state.code.value = t;
                          },
                          style: TextStyle(color: Colors.black),
                          inputFormatters: [
                            FilteringTextInputFormatter.digitsOnly,
                            LengthLimitingTextInputFormatter(6)
                          ],
                          keyboardType: TextInputType.number,
                          inputDecoration: InputDecoration(
                              isCollapsed: true,
                              isDense: true,
                              contentPadding: EdgeInsets.symmetric(vertical: 8),
                              border: InputBorder.none,
                              hintStyle: hintStyle,
                              hintText: LocaleKeys.enter_email_code.tr),
                        )),
                  ),
                  Obx(() {
                    if (logic.globalService.remainEmailSeconds.value == 0) {
                      return GestureDetector(
                        onTap: logic.sendEmail,
                        child: Padding(
                          padding: const EdgeInsets.all(5.0),
                          child: Text(
                            LocaleKeys.send_email_code.tr,
                            style:
                                TextStyle(fontSize: 14.sp, color: Colors.black),
                          ),
                        ),
                      );
                    } else {
                      return Text(
                          "${logic.globalService.remainEmailSeconds.value}s");
                    }
                  }),
                ],
              ),
            ),
            Divider(
              color: lineColor,
              thickness: 0.3,
            ),
            SizedBox(
              height: 40,
            ),
            GestureDetector(
              onTap: logic.login,
              child: Container(
                padding: EdgeInsets.symmetric(vertical: 16),
                decoration: BoxDecoration(color: Colors.black),
                child: Center(
                  child: Text(
                    LocaleKeys.login.tr,
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}
